<template>
  <div class="detailContent">
    <div class="divTop" :style="{ background: bgColor }">
      <div class="topTitle">
        <p class="off">
          <van-icon name="cross" color="white" size="20" @click="Back" />
        </p>
        <h2>真空魔法保温杯</h2>
      </div>
      <div class="tabs">
        <van-tabs
          v-model:active="active"
          swipeable
          @click-tab="changeBgColor(active)"
        >
          <van-tab v-for="item in goodsColor" :title="item.color">
            <div class="left">
              <img v-lazy="getImageUrl(item.imgSrc, 'png')" alt="" />
            </div>
            <div class="right">
              <p class="pPrice">
                <span>型号：MF-S234</span>
                <span class="pricee">￥{{ item.price }}</span>
              </p>
              <p>颜色：{{ item.color }}</p>
              <p>容量：500ml</p>
              <p class="buy" @click="isLogin">立即购买</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="detailImgs">
      <div class="moveImgs">
        <img
          v-for="item in detailImages"
          v-lazy="getImageUrl(item.src, 'jpg')"
          alt=""
        />
      </div>
    </div>
    <ZhiDing></ZhiDing>
  </div>
</template>

<script setup>
import { getImageUrl } from "@/uilts/index";
import ZhiDing from "@/components/ZhiDing.vue";
import { ref } from "vue";
import { showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
const active = ref("false");
const bgColor = ref("rgb(39,39,39)");
const router = useRouter();
const goodsColor = [
  {
    color: "黑色",
    imgSrc: "download-1",
    price: 90.6,
    bggColor: "rgb(39,39,39)",
  },
  {
    color: "红色",
    imgSrc: "download-3",
    price: 90.6,
    bggColor: "rgb(183,68,68)",
  },
  {
    color: "白色",
    imgSrc: "download-2",
    price: 90.6,
    bggColor: "rgb(204,204,204)",
  },
  {
    color: "金色",
    imgSrc: "download-4",
    price: 90.6,
    bggColor: "rgb(141,127,117)",
  },
];
function Back() {
  router.back();
}
function changeBgColor(index2) {
  goodsColor.forEach((item, index) => {
    if (index2 === index) {
      bgColor.value = item.bggColor;
    }
  });
}
// 判断用户是否登录
function isLogin() {
  const Token = localStorage.getItem("token");
  if (Token !== null) {
    router.push("/buyDetail");
  } else {
    showConfirmDialog({
      message: "您还没有登录，想要购买商品，需要先登录，是否跳转到登录页？",
    })
      .then(() => {
        router.push("/login");
      })
      .catch(() => {});
  }
}
const detailImages = [
  {
    id: 1,
    src: "u390",
  },
  {
    id: 2,
    src: "u391",
  },
  {
    id: 3,
    src: "u392",
  },
  {
    id: 4,
    src: "u393",
  },
  {
    id: 5,
    src: "u394",
  },
  {
    id: 6,
    src: "u395",
  },
  {
    id: 7,
    src: "u396",
  },
  {
    id: 8,
    src: "u397",
  },
  {
    id: 9,
    src: "u398",
  },
];
</script>

<style lang="less" scoped>
a {
  color: black;
}
.detailContent {
  overflow: hidden;
  position: relative;
  .divTop {
    height: 68vw;
    background: aqua;
    border: 1px solid transparent;
    position: relative;
    .topTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5vw;
      padding: 0vw 4vw;
      .off {
        width: 8.5vw;
        height: 8.5vw;
        font-weight: bold;
        border-radius: 50%;
        background: black;
        text-align: center;
        line-height: 9.8vw;
      }
      h2 {
        font-weight: bold;
        color: white;
      }
    }
  }
}
.tabs {
  position: absolute;
  bottom: -40.333vw;
  left: 0vw;
  animation: move7 linear 0.5s;
  animation-fill-mode: forwards;
}
:deep(.van-tab--active) {
  padding: 0vw 3.333vw;
  color: white;
  font-size: 4.6vw;
  background: black;
  margin-left: 5vw;
  border-radius: 0.667vw;
}
:deep(.van-tab) {
  font-size: 3.5vw;
  margin-left: 6.5vw;
  flex: none;
  padding: 0;
  font-weight: 600;
  color: white;
}
:deep(.van-tabs--line .van-tabs__wrap) {
  height: 7.333vw;
  margin-bottom: 4.8vw;
}
:deep(.van-tabs__nav) {
  background: transparent;
}
:deep(.van-tab__text--ellipsis) {
  padding: 0vw 4.333vw;
}
:deep(.van-tabs__line) {
  width: 0;
}
:deep(.van-tab__panel) {
  width: 80.333vw;
  height: 36.333vw;
  background: white;
  border-radius: 1.333vw;
  padding: 5.667vw 4vw;
  display: flex;
  .left {
    margin-right: 4.667vw;
    img {
      width: 9.533vw;
      height: 23.2vw;
    }
  }
  .right {
    position: relative;
    p {
      font-size: 3.6vw;
      font-weight: bold;
      margin-bottom: 2.333vw;
    }
    .pPrice {
      .pricee {
        margin-left: 14.333vw;
        font-size: 4.8vw;
        font-weight: bold;
      }
    }

    .buy {
      position: absolute;
      right: -3.867vw;
      bottom: 0.667vw;
      font-size: 3.5vw;
      border: 0.133vw solid black;
      padding: 0.8vw 3.667vw;
    }
  }
}
:deep(.van-swipe__track) {
  width: 81.333vw;
  margin-left: 6.333vw;
}
@keyframes move7 {
  0% {
    position: absolute;
    bottom: -40.333vw;
    left: 0vw;
  }
  100% {
    position: absolute;
    bottom: 3vw;
    left: 0vw;
  }
}
.detailImgs {
  animation: move8 linear 0.5s;
  animation-fill-mode: forwards;
  img {
    width: 100%;
    height: 60.333vw;
  }
}

@keyframes move8 {
  0% {
    transform: translateY(91.333vw);
  }
  100% {
    transform: translateY(0vw);
  }
}
</style>
